<template>
  <div class="bottom">
    <div class="bottom-title">
      <p>你觉得文章怎么样</p>
    </div>
    <div class="bottom-body">
      <textarea placeholder="写下你想说的话！" v-model="CommentContent"></textarea>
      <button @click="sendComment(nid)">发表评论</button>
    </div>
    <div class="bottom-fottom">
      <p>
        <span>24</span>人参与,
        <span>{{ Articlecontent.comment }}</span>条评论
      </p>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'

export default {
  name: "CommentInput",
  data() {
    return {
      CommentContent: ''  // 父评论内容
    }
  },
  methods: {
    ...mapActions('Article', ['addcomment', 'getComment','getArticlecontent']),
    // 发表根评论
    sendComment(nid) {
      let data = {
        nid,  // 文章id
        content: this.CommentContent,  // 评论内容
        user: this.$store.state.userinfo.nid, //用户id
        rootComment: -1,  // 父评论id，没有则表示为根评论
      }
      this.addcomment(data).then(value => {
        if (value['code'] === 200) {
          this.getComment(nid)
          this.getArticlecontent({nid: this.$route.params.id, usernid: this.$store.state.userinfo.nid})
          this.$message({
            message: value['info'],
            type: 'success',
          })
          this.CommentContent = ''
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    },
  },
  computed: {
    nid() {
      return this.$route.params.id
    },
    ...mapState('Article', ['Articlecontent'])
  }
}
</script>

<style scoped lang="less">
.bottom {
  margin-top: 30px;
  height: 230px;
  background-color: #ffffff;
  padding: 20px 10px;

  .bottom-title {
    color: #333333;
    margin-bottom: 10px;
    border-bottom: 2px #e2e2e2 solid;
    padding-bottom: 10px;
  }

  .bottom-body {
    position: relative;
    height: 130px;
    padding: 20px;
    box-shadow: inset 2px 2px 6px #EFEFEF;
    border-radius: 10px;

    textarea {
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      margin: 0;
      resize: none;


      &:focus {
        outline: none;
      }
    }

    button {
      width: 75px;
      height: 35px;
      background-color: orange;
      border: 0;
      border-radius: 10px;
      color: white;
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }

  .bottom-fottom {
    margin-top: 10px;

    span {
      color: orange;
      margin-right: 5px;
    }
  }
}
</style>